<template>
  <div class="detail_page">
    <!-- 导航 开始 -->
    <nav-bar title="详情"></nav-bar>
    <!-- 导航 end -->

    <!-- 头部 开始 -->
    <div class="banner"></div>
    <!-- 头部 end -->

    <!-- 医生信息 开始 -->
    <div class="doctor_info">
      <div class="left">
        <!-- 医生名称 开始 -->
        <div class="head">
          <span class="name">{{ oInfo.doctorName }}</span>
          <span class="sub">{{ oInfo.titleName }}</span>
        </div>
        <!-- 医生名称 end -->

        <!-- 地址 开始 -->
        <div class="address">
          <span>所在地：{{ oInfo.provinceName }}</span>
          <span class="lili_divider"></span>
          <span
            >从业：{{ oInfo.employmentDuration
            }}<span v-if="oInfo.employmentDuration">年</span></span
          >
        </div>
        <!-- 地址 end -->
      </div>

      <!-- 医生头像 开始 -->
      <div class="avatar">
        <li-image
          :src="oInfo.doctorLogo"
          class="img"
          round
          v-if="oInfo.doctorLogo"
        />
        <TextLogo :name="oInfo.textLogo" v-else-if="oInfo.textLogo"></TextLogo>
        <img
          src="@/assets/images/avatar/doctor_circle.png"
          class="img"
          alt=""
          v-else
        />
      </div>
      <!-- 医生头像 end -->
    </div>
    <!-- 医生信息 end -->

    <!-- 执业地址 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">执业地址</h2>
      <div class="content">
        <van-cell-group :border="false" class="van_cell_group">
          <van-cell
            :title="item.hospitalName"
            :to="`/inquire/hospital/${item.id}`"
            is-link
            :border="false"
            v-for="(item, index) in oInfo.hospitalQualificationList || []"
            :key="index"
          />
          <!-- <van-cell title="广州德华口腔医院" is-link :border="false" /> -->
        </van-cell-group>
      </div>
    </div>
    <!-- 执业地址 end -->

    <!-- 医生执业证 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">医生执业证</h2>
      <div class="cell_list">
        <div class="cell_box">
          <div class="name">证件编码：</div>
          <div class="txt">{{ oInfo.practiceLicenseNumber }}</div>
        </div>
        <div class="cell_box">
          <div class="name">医师级别：</div>
          <div class="txt">{{ oInfo.practiceLicenseLevel }}</div>
        </div>
        <div class="cell_box">
          <div class="name">执业范围：</div>
          <div class="txt">{{ oInfo.practiceBusinessScope }}</div>
        </div>
        <div class="cell_box">
          <div class="name">执业类型：</div>
          <div class="txt">{{ oInfo.practiceBusinessClass }}</div>
        </div>
        <div class="cell_box long_cell_box">
          <div class="name">发证机关：</div>
          <div class="txt">{{ oInfo.issuingAuthority }}</div>
        </div>
      </div>
    </div>
    <!-- 医生执业证 end -->

    <!-- 医生资格证 开始 -->
    <div class="sigle_box">
      <h2 class="h2_title">医生资格证</h2>
      <div class="cell_list">
        <div class="cell_box">
          <div class="name">证件编码：</div>
          <div class="txt">{{ oInfo.certificateNumber }}</div>
        </div>
        <div class="cell_box">
          <div class="name">是否换证：</div>
          <div class="txt">
            {{ oInfo.certificateChanged == 1 ? "是" : "否" }}
          </div>
        </div>
        <div class="cell_box">
          <div class="name">从业年限：</div>
          <div class="txt">
            {{ oInfo.employmentYear }}
            <span v-if="oInfo.employmentYear">年</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 医生资格证 end -->

    <!-- 更多信息 开始 -->
    <div class="sigle_box">
      <div class="h2_title">更多信息</div>
      <div class="content" v-html="oInfo.detailIntroduce"></div>
    </div>
    <!-- 更多信息 end -->
  </div>
</template>
<script>
import { Cell, CellGroup } from "vant";
import { GET_QUALIFICATION_DOCTOR_INFO } from "@/http/interface";
import TextLogo from "@/components/logo/index.vue";
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    TextLogo,
  },
  data() {
    return {
      doctorId: "",
      oInfo: {},
      title: "",
      description: "",
      keywords: "",
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/inquire/doctor/${this.doctorId}`,
        },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let res = await $axios.get(GET_QUALIFICATION_DOCTOR_INFO, {
      params: { id: params.id },
    });
    let oInfo = res.data || {};
    console.log(oInfo);
    return {
      doctorId: params.id,
      oInfo,
      title: oInfo.seoTitle,
      keywords: oInfo.seoKeywords,
      description: oInfo.seoDescription,
    };
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/inquire/doctor.less";
</style>